<template>
  <div id="app-container">
    <!--条件查询表单-->
    <el-form :inline="true" class="demo-form-inline">
       <el-form-item>
          <el-select v-model="packageSearch.other.state" clearable placeholder="服务包状态">
              <el-option :value="0" label="未审核"/>
              <el-option :value="1" label="使用中"/>
              <el-option :value="2" label="停用"/>
              <el-option :value="3" label="驳回"/>
          </el-select>
      </el-form-item>
      <el-form-item>
        <el-input v-model="packageSearch.otherLike.name" placeholder="服务包名称"/>
      </el-form-item>


      <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
      <el-button type="default" @click="packageSearch={other:{},otherLike:{}}">清空</el-button>
      <router-link  to="/package/add">
        <el-button type="primary">新增</el-button>
      </router-link>
    </el-form>

    <!--数据显示列表-->
    <div >
      <div v-for="level in levels" :key="level.id">
        {{level.name}}

        <div v-for="data in datalist" :key="data.id">
          <div v-if="data.typeId==level.id"  style=" width: 350px;height: 150px; float: left; margin-right: 10px;background-color: #99a9bf ;border-radius:21px;padding-top: 20px;
padding-right: 13px;
padding-bottom: 40px;
padding-left: 13px;" >
            <router-link  :to="'/package/detail/'+data.id">
            <div style=" width: 350px;height: 150px;">
              <span >{{data.name}}</span><br>
              <span>服务对象：{{data.object}}</span><br>
              <span>状态：{{getStateName(data.state+'')}}</span><br>
            </div>
            </router-link>
          </div>
        </div>
        <div style="width: 350px;height: 150px;"></div>
      </div>
    </div>




  </div>
</template>

<script>
import axios from 'axios'
import doctor from '../../api/admin/doctor'
export default {
  data(){
    return{
      levels:[],
      packageSearch:{other:{},otherLike:{}},
      datalist:[]
    }
  },
  created() {
    this.getList();
    this.getLevel();
  },
  methods:{
    getLevel(){
      axios.get('http://localhost:8080/package-type').then(r=>{
        console.log(r.data.data)
        this.levels=r.data.data;
      })
    },
    //分页查所有
    getList(){
      axios.post('http://localhost:8080/package/search/'+1+'/'+100,this.packageSearch).then(res=>{
        console.log(res.data.data.data)
        this.datalist=res.data.data.data;
      })
    },
    getStateName(i){//0未审核，1使用中，2停用，3驳回
      if(i=='0')return '未审核'
      if(i=='1')return '使用中'
      if(i=='2')return '停用'
      if(i=='3')return '驳回'
    }

    //删除
    // handleRemove(row){
    //   this.$confirm("是否确定删除？", "提示", {type: "warning"})
    //     .then(() => {
    //       // 点击了确定删除
    //       doctor.removeById(row.id).then(res => {
    //         // 显示提示信息
    //         this.$message.success(res.message);
    //         // 重新查询分页数据
    //         this.getList();
    //         // this.currentPage=row.currentPage-1;
    //       });
    //     })
    //     .catch(() => {
    //       // 点击取消删除
    //       this.$message.info("取消删除操作");
    //     });
    // },
    // downlaod(){
    //   let list=[];
    //   trainer.search().then(res=>{
    //     list=res.data;
    //   })
    //   trainer.download(list).then(res=>{
    //     this.$message.success("操作成功")
    //   })
    // },
    // 导出数据
    // handleExport(){
    //   console.log("===导出数据===");
    //   axios({
    //     method: 'post',
    //     url: "http://localhost:8080/doctor/export",
    //     responseType: 'blob', // 返回类型为数据流
    //     data: this.trainerQueryVo // 需要传参的话，在这传
    //   }).then(res => {
    //     if (res && res.data) {
    //       // 调用js-file-download下载文件，第一个参数是数据流，第二个参数是文件名
    //       fileDownload(res.data, "培训师.xlsx")
    //     }
    //   })
    // }
  }
}
</script>

<style scoped>

</style>
